import React from 'react';
import StateMixin from 'reflux-state-mixin';

import CatalogueAction from 'pages/catalogue/actions/catalogueAction';
import CatalogueStore from 'pages/catalogue/stores/catalogueStore'

export default React.createClass({
  mixins: [StateMixin.connect(CatalogueStore)],
  getInitialState() {
    return {
    };
  },
  componentDidMount() {
    CatalogueAction.getPopServiceItem().then((data)=>{
      this.setState({
        PopServicesList:data
      })
    })
  },
  onChange(id) {
    CatalogueAction.getTicket(id)
  },
  render() {
    return (
            <div className="left-wrap">
                <div className="left-content">
                    <div className="left-content-top">
                        <div className="left-radius" />
                        <span>热门服务</span>
                    </div>
                    <div className="left-content-content">
                        <ul>
                            {_.map(this.state.PopServicesList,(item,index)=>{
                              return (
                                    <li key={index}>
                                        <a>
                                            <i className="anticon anticon-github" style={{fontSize: '35px'}}/>
                                            <span className="left-content-span"
                                                  onClick={this.onChange.bind(this,item.id)}>{item.name}</span>
                                            <i className="anticon anticon-right left-content-content-i1"/>
                                            <i className="left-content-content-i2" />
                                        </a>
                                    </li>
                              )
                            })
                            }
                        </ul>
                    </div>
                </div>
            </div>
    );
  }
})
